<template>
	<view class="">
		<Header title="AI错题解析" :isHome="true" :isWhite='true'></Header>
		<view class="chat-page">
			<!-- 聊天消息展示区域 -->
			<scroll-view class="chat-messages" :scroll-y="true">
				<view class="message-item" :class="{ 'message-item-other': message.from === 'user' }"
					v-for="(message, index) in messageList" :key="index">
					<view class="message-avatar" v-if="message.from === 'other'">
						<image src="/static/avator1.png" mode="aspectFit" class="avator"></image>
					</view>
					<view class="message-content"
						:class="{ 'user-message': message.from === 'other', 'other-message': message.from === 'user' }"
						v-if="message.content">
						{{message.content}}
					</view>
					<view class="message-avatar" v-if="message.from === 'user'">
						<image src="/static/avator1.png" mode="aspectFit" class="avator"></image>
					</view>
				</view>
			</scroll-view>

		</view>
		<view class="bottom-text">
			解析也有不准确的时候，请以参考答案为准，如有疑问，请咨询学习顾问
		</view>
		<view class="bottom">
			<view class="bottom-info">
				<input placeholder="请输入内容" border="surround" v-model="inputValue" @change="change" class="input-box" />
				<view class="send" @click="sendMessage">发送咨询</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		get
	} from '../../utils/request';
	export default {
		data() {
			return {
				messageList: [{
						content: '',
						from: 'other',
					},
					// {
					// 	content: '',
					// 	from: 'user',
					// }
				], // 存储聊天消息的数组
				inputValue: '', // 绑定输入框的值
				id: '',
				context_id: ''
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				get('/ai/user_send?ai_id=' + this.id + '&context_id=&userMessage=').then((res) => {
					if (res.code == 1) {
						this.context_id = res.data.context_id
						this.messageList[0].content = res.data.message
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败'
						})
					}
				});
			},
			sendMessage() {
				if (this.inputValue.trim() !== '') {
					// 创建用户发送的消息对象
					const userMessage = {
						from: 'user',
						content: this.inputValue
					};
					this.messageList.push(userMessage);
					get('/ai/user_send?userMessage=' + this.inputValue + '&context_id=' + this.context_id).then(res => {
							if (res.code == 1) {
								const otherMessage = {
									from: 'other',
									content: res.data.message
								};
								this.context_id = res.data.context_id
								this.messageList.push(otherMessage);
							} else {
								uni.showToast({
									title: res.msg
								})
							}
						})
						.catch(err => {
							console.error('GET 请求失败:', err);
						});
					this.inputValue = ''; // 清空输入框
				}
			}
		}
	}
</script>

<style lang="scss">
	.bottom-text {
		position: fixed;
		bottom: 240rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		width: 100%;
		color: #878787;
	}

	.chat-messages {
		flex: 1;
		overflow-y: auto;
		padding-top: 30rpx;
		padding-bottom: 250rpx;
	}

	.message-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.message-item-other {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 20rpx;
	}

	.message-avatar {


		.avator {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			display: block;
			margin: 0 20rpx;
		}
	}

	.message-content {
		max-width: 60%;
		padding: 12rpx 20rpx;
		border-radius: 12rpx;
		word-break: break-all;
	}

	.user-message {
		background-color: #FFEBC2;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.other-message {
		background-color: #E0E0E0;
		color: black;


	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 0 auto;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

		}

		.bottom-flex {
			display: flex;
		}
	}

	.input-box {
		width: 454rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: 1rpx solid #ccc;
		border-radius: 48rpx;
		padding: 0 32rpx;
		font-weight: 400;
		font-size: 32rpx;
	}

	.send {
		width: 200rpx;
		height: 96rpx;
		background: #1A1A1A;
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>